<template>
	<cl-dialog
		title="打款"
		width="600px"
		:visible.sync="visible"
		@close="close"
		:before-close="beforeClose"
	>
		<el-form label-position="top" :model="form" ref="mform">
			<el-form-item label="打款日期" prop="payment_date">
				<cl-date-picker
					v-model="form.payment_date"
					type="date"
					placeholder="选择日期"
					value-format="yyyy-MM-dd"
					:picker-options="pickerOptions"
					style="width: 100%"
				/>
			</el-form-item>
			<el-form-item label="上传图片" prop="images">
				<cl-upload
					multiple
					:limit="3"
					:limit-size="3"
					list-type="picture-card"
					ref="uploads"
					v-model="form.images"
					:on-success="onUploadSuccess"
				/>
			</el-form-item>
			<el-form-item label="备注" prop="operate_mes">
				<el-input
					type="textarea"
					placeholder="请输入内容"
					:rows="3"
					v-model="form.operate_mes"
				/>
			</el-form-item>
		</el-form>
		<template #footer>
			<el-button type="primary" @click="submit">提交</el-button>
			<el-button @click="close">关闭</el-button>
		</template>
	</cl-dialog>
</template>
<script>
import qs from "qs";
import dayjs from "dayjs";
export default {
	data() {
		return {
			visible: false,
			form: {
				refund_id: "",
				payment_date: dayjs().format("YYYY-MM-DD"),
				images: "",
				operate_mes: "",
				operate_state: 5
			},
			rules: {
				payment_date: [{ required: true, message: "请选择打款日期" }],
				images: [{ required: true, message: "请上传打款图片" }],
				operate_mes: [{ required: true, message: "请填写退回原因" }]
			},
			saving: false,
			create_time: "",
			pickerOptions: {
				disabledDate: time => {
					return time.getTime() > Date.now() || time.getTime() < dayjs(this.create_time);
				}
			}
		};
	},
	methods: {
		open(data = {}) {
			this.visible = true;
			this.$store.commit("common/SET_REFUND_STATE", false);
			let { id, create_time } = data;
			this.form.refund_id = id;
			this.create_time = create_time;
		},
		beforeClose(done) {
			this.saving && done();
		},
		close() {
			this.visible = false;
			this.create_time = "";
			this.reset();
		},
		reset() {
			this.saving = false;
			this.$refs.mform.resetFields();
		},
		submit() {
			this.$refs["mform"].validate(async (valid, errors) => {
				this.showFormErr(errors);
				if (!valid) {
					return;
				}
				this.saving = true;
				await this.$service.orderrefund.financepayment(qs.stringify(this.form)).done(() => {
					this.saving = false;
				});
				this.close();
				this.$emit("success");
				this.$store.commit("common/SET_REFUND_STATE", true);
				this.$message.success("操作成功");
			});
		},
		onUploadSuccess(res) {}
	}
};
</script>
